<template>
  <div>
    <p>
      未完成的任务数量：{{ list.filter((item) => item.done === false).length }}
    </p>
    <p>未完成的任务的数量：{{ num }}</p>
  </div>
</template>

<script>
// 计算属性:可以简化视图中复杂的插值表达式 计算属性不是下面的那个方法，而是那个方法的返回值
// 计算属性和方法的一个区别 方法可以写小括号也可以不写，但是计算属性不能写，写了就报错
export default {
  data() {
    return {
      list: [
        { id: 1, name: "吃饭", done: true },
        { id: 2, name: "睡觉", done: false },
        { id: 3, name: "打豆豆", done: false },
      ],
    };
  },
  computed: {
    num() {
      return this.list.filter((item) => item.done === false).length;
    },
  },
};
</script>

<style scoped></style>
